<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <span>
        <input type="text" v-model='username'>
        <button @click='add'>添加</button>
        <button @click='del'>删除</button>
        <button @click='change'>替换</button>
      </span>
    </div>
    <ul>
      <li :key='index' v-for='(item,index) in employees'>{{item}}</li>
    </ul>
  </div>
  <script type="text/javascript">
    /*
    */
    var vm = new Vue({
      el: '#app',
      data: {
        username: '',
        employees: ['zs','lisi','wangwu']
      },
      methods: {
        add: function() {
          this.employees.push(this.username);
        },
        del: function() {
          this.employees.pop();
        },
        change: function() {
          // 改变数据的内容
          this.employees = this.employees.slice(0,1);   //只保留第一个
        }
      }
    });
  </script>
</body>
</html>
